/**
 * @description  超额风险趋势图
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC } from '../../../../../../../comps';
import style from '../index.less';

class ExcessTrend extends PureComponent {
  constructor() {
    super();
    this.state = {
      ExcessTrendData: {},
    };
  }
  componentDidMount() {
    const { args } = this.props;
    this.getRiskTrend(args);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { args, timeStamp } = nextProps;
    if (JSON.stringify(args) !== JSON.stringify(this.props.args)) {
      this.setState({
        ExcessTrendData: {},
      });
      this.getRiskTrend(args);
    }
  }
  getRiskTrend = (args) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'portfolioRiskM/getRiskTrend',
      payload: args,
      callback: (data) => {
        if (data) {
          let obj = { color: 'rgba(133, 142, 239, 0.5)' };
          if (data.series && data.series[2]) {
            data.series[2].areaStyle = obj;
          }
        }
        this.setState({
          ExcessTrendData: data || {},
        });
      },
    });
  };

  showCharts = () => {
    const { ExcessTrendData } = this.state;
    const xAxis = ExcessTrendData.xAxis;
    const series = ExcessTrendData.series;
    return (
      <XYAxisChartsC
        xAxis={xAxis}
        series={series}
        height='400px'
        yAxisUnit={['单位(%)']}
        dataZoom={true}
        width='100%'
        // colors={['#2366FF','#00CCEC','rgba(133, 142, 239, 0.5)']}
      />
    );
  };

  render() {
    return (
      <div className={style.back_charts}>
        <div className='echarts'>{this.showCharts()}</div>
      </div>
    );
  }
}
export default connect(({ portfolioRiskM }) => ({
  portfolioRiskM,
}))(ExcessTrend);
